<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  export default {
    // mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart',

      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      disanData:{
        totalSunLastMouthList:[],
        totalSunList:[],
        depList:[]
      }
    },

    data() {
      return {
        chart: null,
        option: {},
        //标题
        dataArr:[ ],
        //本月消耗
        benyeuArr:[],
        shangyueArr:[],

      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })

    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    watch:{
      disanData(curVal,oldVal){

        if(curVal){
          this.xuanran()
          this.initChart()

        }
      },
    },
    created() {
      // this.initChart()

    },
    methods: {
      xuanran:function(){

        console.log(333)
        this.benyeuArr = this.disanData.totalSunLastMouthList
        this.shangyueArr = this.disanData.totalSunList
        this.dataArr =  this.disanData.depList

        this.option = {
          // backgroundColor: '#031A32',
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true
              }
            }
          },
          grid: {
            left: "80px",
            top: "50px",
            right: "5%",
            bottom: "22%"
          },
          legend: {
            data: ["本月计划", "上月计划"],
            top: "4%",
            textStyle: {
              color: "#1FC3CE",
              fontSize: 14
            }
          },
          xAxis: {
            data: this.dataArr,
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#3d5269",
                width: 1
              }
            },
            axisTick: {
              show: true, //隐藏X轴刻度
              alignWithLabel: true
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#3ff5f3", //X轴文字颜色
                fontSize: 14
              },
              interval: 0,
              rotate: 30
            }
          },
          yAxis: [
            {
              type: "value",
              name: "单位/万元",
              nameTextStyle: {
                color: "#8fe3f8",
                fontSize: 14
              },
              splitLine: {
                show: true,
                lineStyle: {
                  width: 1,
                  color: "#8fe3f8"
                }
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#3ff5f3",
                  fontSize: 14
                }
              }
            },
          ],
          series: [{
            name: "本月计划",
            type: "bar",
            barWidth: 18,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#3ff5f3"
                },
                  {
                    offset: 1,
                    color: "#368bde"
                  }
                ])
              }
            },
            data: this.benyeuArr
          },
            {
              name: "上月计划",
              type: "bar",
              barWidth: 18,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#8808e5"
                  },
                    {
                      offset: 1,
                      color: "#0649b4"
                    }
                  ])
                }
              },
              data: this.shangyueArr
            },
          ]
        }
      },
      initChart() {
        var that = this
        that.chart = echarts.init(this.$el, 'macarons')
        that.chart.setOption(that.option)

      },

    }
  }
</script>
